<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="http://cdn.famanoder.com/javascripts/lib/jquery0.js"></script>
	<style>
	*{padding: 0;margin: 0;font-family: '微软雅黑';}
	.box{margin: 100px;width:300px;height: 200px;border:1px solid #ccc;padding: 10px;font-size: 14px;}
	</style>
</head>
<body>
	<div class="box" contenteditable>
		
	</div>
	<div class="as">
		sadsc
	</div>
	<div class="dsv">
		cds
	</div>
<div class="">cdsv</div>
	<script>
	var pasteToServer=function () {
		var Paster=function(conf){
			this.selector=conf.selector||document;
			this.serverUrl=conf.serverUrl;
			this.ignoreData=conf.ignoreData;
			this.tagsReg=/<\w+\s+(?!yinlianbase64).+?>/g;
			this.mYtagsReg=/<\w+\s+(?=yinlianbase64).+?>/g;
			this.img=conf.img||{
				iconSize:{
					width:100,
					height:100
				},
				maxlength:10
			};
		}
		Paster.prototype={
			getClipboardData:function(evt){
				return evt.clipboardData || evt.originalEvent.clipboardData;
			},
			readData:function(items,fn){
				var self=this,blob=null;
				for (var i = 0; i < items.length; i++) {
					if (items[i].type.indexOf("image") !== -1) {
						blob = items[i].getAsFile();
					}
				};
				if (blob!==null) {
					var reader=new FileReader();
					reader.onload=function(evt){
						fn&&fn(evt);
					}
					reader.readAsDataURL(blob);
				};
			},
			insertImg:function(src,str){
				var size=this.img.iconSize;
				$(this.selector).append('<img yinlianbase64="'+str+'" src="'+src+'" abase64="'+str+'" style="max-width:'+parseInt(size.width)+'px;max-height:'+parseInt(size.height)+'px;"/>');
			},
			getArgType:function(arg){
				return Object.prototype.toString.call(arg).match(/\s(\w+)/)[1].toLowerCase();
			},
			filterData:function(data){
				var ignore=this.ignoreData,
					type=this.getArgType(ignore);
				if(type=='function'){
					ignore(data);
				}else{
					return data.replace(ignore,'');
				}
			},
			uploadImgFromPaste:function(file, clas) {
			  var formData = new FormData(),self=this;
			  formData.append('image', file);
			  var xhr = new XMLHttpRequest();
			  xhr.open('POST', this.serverUrl);
			  xhr.onload = function () {
			    if ( xhr.readyState === 4 ) {
			      if ( xhr.status === 200 ) {
			        var data = JSON.parse( xhr.responseText );
			        var reg=new RegExp('data:image.+"\\sabase64="'+q+'"','i');
			        $(self.selector).html($(self.selector).html().replace(reg,data.fileurl+'"'));
			      }  
			    };
			  };
			  xhr.onerror = function (e) {
			    console.log( xhr.statusText );
			  }
			  xhr.send(formData);
			},
			bind:function(selector){
				var self=this;
				$('body')
				.on('paste',selector,function(event){
					
					var data=self.getClipboardData(event),
						items=data.items;
					if(!data.getData("text")&&items){
						var ims=$(selector).html().match(self.mYtagsReg);
						if (ims&&ims.length>=self.img.maxlength) return false;
						self.readData(items,function(evt){
							var ret=evt.target.result,str=new Date().getTime();
							self.insertImg(ret,str);
							self.uploadImgFromPaste(ret,str);
						});
					}
				})
				.on('keyup', selector, function() {
					if (self.tagsReg.test($(this).html())) {
						$(this).html($(this).html().replace(self.tagsReg,''));
					}
				});
			},
			init:function(){
				this.bind(this.selector);
			},
			off:function(){
				$(this.selector).off('paste');
				Paster=null;
			}
		}
		return Paster;
	}();

	var paster=new pasteToServer({
		selector:'.box',
		serverUrl:'/upload_image_by_paste',
		ignoreData:'a'
	});
	paster.init();
// document.querySelector('.box').addEventListener('paste', function (event) {
//   console.log(event.clipboardData.getData("text"))//谷歌数据来自event,其他可能来自window
//   var isChrome = false;
//   if ( event.clipboardData || event.originalEvent ) {
//     //not for ie11  某些chrome版本使用的是event.originalEvent
//     var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
//     if ( clipboardData.items ) {
//       // for chrome
//       var  items = clipboardData.items,
//         len = items.length,
//         blob = null;
//       isChrome = true;
//       //items.length比较有意思，初步判断是根据mime类型来的，即有几种mime类型，长度就是几（待验证）
//       //如果粘贴纯文本，那么len=1，如果粘贴网页图片，len=2, items[0].type = 'text/plain', items[1].type = 'image/*'
//       //如果使用截图工具粘贴图片，len=1, items[0].type = 'image/png'
//       //如果粘贴纯文本+HTML，len=2, items[0].type = 'text/plain', items[1].type = 'text/html'
//       // console.log('len:' + len);
//       // console.log(items[0]);
//       // console.log(items[1]);
//       // console.log( 'items[0] kind:', items[0].kind );
//       // console.log( 'items[0] MIME type:', items[0].type );
//       // console.log( 'items[1] kind:', items[1].kind );
//       // console.log( 'items[1] MIME type:', items[1].type );
 
//       //阻止默认行为即不让剪贴板内容在div中显示出来
//       event.preventDefault();
 
//       //在items里找粘贴的image,据上面分析,需要循环  
//       for (var i = 0; i < len; i++) {
//         if (items[i].type.indexOf("image") !== -1) {
//           // console.log(items[i]);
//           // console.log( typeof (items[i]));
 
//           //getAsFile() 此方法只是living standard firefox ie11 并不支持        
//           blob = items[i].getAsFile();
//         }
//       }
//       if ( blob !== null ) {
//         var reader = new FileReader();
//         reader.onload = function (event) {
//           // event.target.result 即为图片的Base64编码字符串
//           var base64_str = event.target.result
//           console.log(reader)
//           console.log(event)
//           $('body').append('<img src="'+base64_str+'" alt="" />')

//           // var img=new Image();
//           // img.onload=function(){
//           // 	if(this.complete){
//           // 		console.log(this.size)
//           // 	}
//           // }
//           // img.src=base64_str;
//           //可以在这里写上传逻辑 直接将base64编码的字符串上传（可以尝试传入blob对象，看看后台程序能否解析）
//           uploadImgFromPaste(base64_str, 'paste', isChrome);
//         }
//         reader.readAsDataURL(blob); 
//       }
//     } else {
//       //for firefox
//       setTimeout(function () {
//         //设置setTimeout的原因是为了保证图片先插入到div里，然后去获取值
//         var imgList = document.querySelectorAll('#tar_box img'),
//           len = imgList.length,
//           src_str = '',
//           i;
//         for ( i = 0; i < len; i ++ ) {
//           if ( imgList[i].className !== 'my_img' ) {
//             //如果是截图那么src_str就是base64 如果是复制的其他网页图片那么src_str就是此图片在别人服务器的地址
//             src_str = imgList[i].src;
//           }
//         }
//         uploadImgFromPaste(src_str, 'paste', isChrome);
//       }, 1);
//     }
//   } else {
//     //for ie11
//     setTimeout(function () {
//       var imgList = document.querySelectorAll('#tar_box img'),
//         len = imgList.length,
//         src_str = '',
//         i;
//       for ( i = 0; i < len; i ++ ) {
//         if ( imgList[i].className !== 'my_img' ) {
//           src_str = imgList[i].src;
//         }
//       }
//       uploadImgFromPaste(src_str, 'paste', isChrome);
//     }, 1);
//   }
// })
 

	</script>
</body>
</html>